<html>
<head>
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/tabview/assets/skins/sam/tabview.css">
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/imageloader/imageloader-min.js&2.6.0/build/element/element-beta-min.js&2.6.0/build/tabview/tabview-min.js"></script>

<style type="text/css">
	body {
		background-color:#C9D0D6;
	}
	
	#MySpaceTabs {
		margin:4em auto;
		min-width:970px;
		width:74.6em;
	}
</style>
</head>

<body class="yui-skin-sam">

<div id="MySpaceTabs" class="yui-navset">
    <ul class="yui-nav">
        <li id='profileTab' class="selected"><a href="#tab1"><em>Your MySpace Profile</em></a></li>
        <li id='friendsTab'><a href="#tab2"><em>Your MySpace Friends</em></a></li>
        <li id='othersTab'><a href="#tab3"><em>Other</em></a></li>
    </ul>            
    <div class="yui-content">
        <div id='profileTabContent'>
            <p><img src="{{ profile.entry.thumbnailUrl }}" /></p> <p>Display Name: {{ profile.entry.displayName }}</p> <p>Profile URL : <a href="{{ profile.entry.profileUrl }}"> {{ profile.entry.profileUrl }}</a><p>
        </div>
        <div id='friendsTabContent'>
			{% for friend in friends.entry %}
			  <a href='{{friend.profileUrl}}'>
			  <img id='{{friend.nickname}}' title='{{ friend.nickname }}' border='0'/>
			  </a>
			{% endfor %}
        </div>
        <div id='othersTabContent'>
            <p>Additional API usage coming soon<p>
        </div>
    </div>
</div>

<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("MySpaceTabs");

var tabTwoImageGroup = new YAHOO.util.ImageLoader.group('friendsTab', 'mouseover');

{% for friend in friends.entry %}
tabTwoImageGroup.registerSrcImage('{{friend.nickname}}', '{{ friend.thumbnailUrl }}');
{% endfor %}

tabTwoImageGroup.addTrigger('friendsTab', 'focus');
tabTwoImageGroup.name = 'tab_two_group';
</script> 

</body>
</html>